<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane v-for="(item,index) in menu_data" :key="index" :label="item.label" :name="item.name" class="tab-pane">
			<Form :sys="data[index]" v-if="item.name!='add'"></Form>
			<el-form ref="form" label-width="100px" v-else>
				<el-form-item label="名称">
					<el-input v-model="add_form.content"></el-input>
				</el-form-item>
				<el-form-item label="标识">
					<el-input v-model="add_form.key"></el-input>
				</el-form-item>
				
				<el-form-item label="配置类型" >
					<el-select v-model="add_form.type" placeholder="请选择" style="width: 100%;">
					    <el-option
					      v-for="(item,index) in menu_data"
					      :key="index"
					      :label="item.label"
					      :value="index">
					    </el-option>
					  </el-select>
				</el-form-item>
				
				<el-form-item label="类型" >
					<el-select v-model="add_form.switch" placeholder="请选择" style="width: 100%;">
					    <el-option
					      v-for="(item,index) in switchs"
					      :key="index"
					      :label="item"
					      :value="index">
					    </el-option>
					  </el-select>
				</el-form-item>
				
				<el-form-item label="值" v-if="add_form.switch>0&&add_form.switch<4">
					<el-input v-model="add_form.other"placeholder="分号隔开,如男;女"></el-input>
				</el-form-item>
				<el-form-item>
				    <el-button type="primary" @click="onSubmit">添加</el-button>
				  </el-form-item>
			</el-form>
			</el-tab-pane>
		  </el-tabs>
	</div>
</template>

<script>
	import SysModel from '../../model/sys.js'
	import Form from './sysform.vue'
	  export default {
		  components:{
		  	Form
		  },
	    data() {
	      return {
			  menu_data:[
				  {
					  label:"基本配置",
					  name:"basic",
				  },
				  {
				  	label:"后台配置",
				  	name:"cms"
				  },
				  {
					  label:"微信配置",
					  name:"wx",
				  },
				  {
					  label:"阿里云配置",
					  name:"ali"
				  },
				  {
				  		label:"添加配置",
				  		 name:"add"
				  },
				 
			  ],
			   data:[],
			   add_form:{
				   key:'',
				   value:'',
				   type:'',
				   switch:'',
				   content:'',
				   other:''
			   },
			   index:0,
			   switchs:["文本",'开关','下拉','多选','图片','文本域'],
	        activeName: 'basic',
	      };
	    },
		mounted(){
			this.get_data()
		},
	    methods: {
	      handleClick(tab, event) {
			this.index=tab.index
	      },
		  get_data()
		  {
		  	const loading = this.$loading({
		  	          lock: true,
		  	          text: '加载中',
		  	          spinner: 'el-icon-loading',
		  	          background: 'rgba(0, 0, 0, 0.7)'
		  	        });
		  	SysModel.get_sys().then(res=>{
		  		this.data=res.data
		  	    loading.close();
		  	})
		  
		  },
		  onSubmit(){
			  SysModel.insert(this.add_form).then(res=>{
			  	if(res.code==200){
			  		this.$message({
			  		         message: '添加成功',
			  		         type: 'success'
			  		       });
						   this.get_data()
			  		
			  	}
			  })
		  }
	    }
		
	  };
</script>

<style>
	.tab-pane{
		width: 360px;
	}
	
</style>
